<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>许愿条</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" charset="utf-8" href="../css/style.css" />
    <script src="../lib/js/ydui.flexible.js"></script>
    <script src="../lib/js/myUtils.js"></script>
    <script src="../lib/layer/layer.js"></script>
    <style type="text/css">
        body{
            background-color: #BBCB3B;
        }
    </style>
</head>
<body>
<div class="bg art_bg">
    <section class="art_con">
        <div class="art_tit">
            <img src="../images/art_tit.png" alt="未加载" />
        </div>
        <div class='res_cont_box art_start '>
            <form id="formData" class="art_from" action="javascript:;">
                <label class="art_label">
                    <span>我的愿望:</span>
                    <textarea name="desire" rows="5"></textarea>
                </label>
                <label class="art_label art_inp">
                    <span class="res-nowrap">姓　　名:</span>
                    <input name="username" />
                </label>
                <label class="art_label art_inp">
                    <span class="res-nowrap">电　　话:</span>
                    <input type="number" name="userphone" />
                </label>
                <label class="art_label art_btn_bot">
                    <button id="onSubmit" type="submit" class="art_btn"><img src="../images/art_btn.png" alt="未加载" /></button>
                </label>
            </form>
            <div class="art_topimg">
                <img src="../images/art_mns.png" alt="未加载"/>
            </div>
            <div class="art_bomimg">
                <img src="../images/art_xm.png" alt="未加载"/>
            </div>
        </div>
    </section>
</div>
</body>
</html>

<script src="../lib/js/zepto.js"></script>

<script type="text/javascript">
    $(document).ready(function(){

        $("#onSubmit").click(function(e){
            e.preventDefault();//阻止表单默认事件
            var desire = $("#formData textarea[name='desire']").val();
            var username = $("#formData input[name='username']").val();
            var userphone = $("#formData input[name='userphone']").val();
            if(myUtils.trim(desire) == ''){
                myMsg('请输入你的愿望');
            }else if(myUtils.trim(username) == ''){
                myMsg('请输入你的名字');
            }else if(myUtils.trim(userphone) == ''){
                myMsg('请输入你的电话');
            }else if(!regObj.tel.test(userphone)){
                myMsg('请输入正确的电话号码');
            }else{
//                提交
                var dataJson = {
                    desire:desire,
                    username:username,
                    userphone:userphone
                };
                console.log(dataJson);
                window.location.href = "/view/share.html";
            }
        });

        function myMsg(msg){
            msg = msg || '消息提示';
            layer.open({
                content: msg
                ,skin: 'msg'
                ,className:'animated zoomIn day025'
                ,time: 2
            });
        }
    });
</script>



